<template>
  <view class="square-container">
    <view class="postcard-list-contaner">
      <view class="postcar-lists-inner">
        <view class="postcar-item" :key="item.id" v-for="item in postcards" @click="gotoDetail(item)">
          <view class="userinfo" style="padding-bottom: 10rpx;">
            <view style="font-size: 14px;display: flex;align-items: center;">
              <view style="width: 24px;height: 24px;border-radius: 50%;" v-if="item.avatar">
                <image :src="'https://'+item.avatar" mode="" style="width: 22px;height: 22px;border-radius: 50%;">
                </image>
              </view>

              <uni-icons type="person-filled" size="24" color="#a0a0a0" v-else></uni-icons>
              {{ item.nickName || ('听友'+item.userId)}}
            </view>
            <view style="font-size: 12px;color: lightgrey;">{{item.createTime}}</view>
          </view>
          <view class="card-info">
            <image :src="'https://' +(item.frontPostcardUrl || item.postcard.frontImgUrl)" style="height: 400rpx;">
            </image>
            <view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getPostcardTypeList,
    getUserPostcardSelectList
  } from '@/apis/postcard.js'

  export default {
    data() {
      return {
        postcardTypes: [],
        tab: -1,
        postcards: [],
        pageIndex: 1,
      };
    },
    onPullDownRefresh() {
      this.postcards = []
      this.pageIndex = 1
      this.getPostcardList()
    },
    onShow() {
      this.userinfo = uni.getStorageSync('userinfo');
      this.postcards = []
      this.pageIndex = 1
      this.getPostcardList()
    },
    onReachBottom() {
      if (this.postcards.length == 0) {
        return;
      }
      this.pageIndex++
      this.getPostcardList()
    },
    methods: {
      getPostcardList() {
        if (this.isSending) {
          return
        }
        this.isSending = true;
        let querParam = {
          pageNum: this.pageIndex,
          pageSize: 10,
          isOpen: 1,
          postcardStatus: 0,
          inputType: 1
        }
        if (this.tab != -1) {
          querParam.postcardTypeId = this.tab
        }
        getUserPostcardSelectList(querParam).then(res => {
          this.postcards = [...this.postcards, ...res.rows];
          //this.totalPage = Math.ceil(res.total / 10);
          this.isSending = false;
          uni.stopPullDownRefresh()
        })
      },
      gotoDetail(item) {
        console.log(item.id)
        uni.navigateTo({
          url: '/pages/detail/detail?postcardId=' + item.id
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .square-container {
    padding: 20rpx;
    background: #f0f0f0;
  }

  .userinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .postcar-lists-inner {
    min-height: 100vh;
    margin-top: 10rpx;
    gap: 20rpx;


    .postcar-item {
      padding: 20rpx;
      position: relative;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      background: #fff;
      box-shadow: 0 1px 4rpx 2rpx #e5e5e5;
      box-sizing: border-box;

      .card-info {
        padding: 20rpx 0;
        color: #a2a2a2;
        font-size: 30rpx;
        border: 1px solid #e5e5e5;
        border-left: 0;
        border-right: 0;
        text-align: center;
      }

      .name {
        position: absolute;
        background: rgba(0, 0, 0, .4);
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        font-size: 25rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
      }
    }
  }
</style>